<template>
  <div>
    <div class="top">
      <el-form :inline="true" :model="region" class="demo-form-inline">
        <el-form-item label="点位搜索">
          <el-input v-model="region.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="区域搜索">
          <el-select v-model="region.regionId" placeholder="请选择">
            <el-option :label="item.name" :value="item.id" v-for="item in regionalMan" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="bottom">
      <div class="bottom-top">
        <el-button type="warning" icon="el-icon-circle-plus-outline"  @click="add">新建</el-button>
      </div>
      <div class="bottom-bot">
        <div class="block">
          <!-- 列表区域 -->
          <el-table :data="regionList" style="width: 100%">
            <el-table-column prop="index" label="序号" width="80" ></el-table-column>
            <el-table-column prop="name" label="点位名称" width="" ></el-table-column>
            <el-table-column prop="regionId" label="所在区域" width=""> </el-table-column>
            <el-table-column prop="businessType.name" label="商圈类型" width=""> </el-table-column>
            <el-table-column prop="ownerName" label="合作商" width=""> </el-table-column>
            <el-table-column prop="addr" label="详细地址" width=""> </el-table-column>
            <el-table-column prop="operate" label="操作" width="180" >
              <template #default="{ row }">
               <el-link type="primary" style="margin-right: 5px;" :underline="false" @click="Vm(row.id)">查看详情</el-link>
               <el-link type="primary" style="margin-right: 5px;" :underline="false" @click="revise(row)">修改</el-link>
               <el-link type="danger" style="margin-right: 5px;" :underline="false" @click="delpoit(row.id)">删除</el-link>
              </template>
            </el-table-column>
          </el-table> 
           <FootBtn :totalCount="totalCount"   :region="this.region"  @goup="goup"/>
        </div>
      </div>
      <!-- 新建组件 -->
      <el-dialog
        title="新增区域"
        :visible.sync="dialogVisible"
        width="35%"
        >
        <pointNew @submit="submit" :row="row" :xiu="xiu"></pointNew>
      </el-dialog>
    </div>
    <!-- 新建弹窗 -->
     <!-- 查看详情弹窗· -->
     <el-dialog
      title="点位详情"
      :visible.sync="dialogTwo"
      width="30%"
      :before-close="handleCloseTwo">
      <span>
        <template>
          <el-table
            :data="FormTwoData"
            style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="90">
            </el-table-column>
            <el-table-column
              prop="innerCode"
              label="设备编号"
              width="120">
            </el-table-column>
            <el-table-column
              prop="vmStatus"
              label="设备状态">
            </el-table-column>
             <el-table-column
              prop="lastSupplyTime"
              label="最后一次供货时间">
            </el-table-column>
          </el-table>
        </template>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogTwo = false">取 消</el-button>
        <el-button type="primary" @click="dialogTwo = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pointNew from '@/components/pointNew.vue'
import FootBtn from '@/components/footbtn.vue'
import '@/styles/second/region.scss'

import { point, delPoint, regionalManagement,lop } from '@/api/homePage'
export default {
  components: {
    FootBtn,
    pointNew,
    
  },
  async created() {
    this.getone()
  },
  data() {
    return {
      // 请求参数
      regionList: [], //每次请求的列表
      totalCount:'',//总条数
      region: {
        pageIndex: 1,
        pageSize: 10,
         name: '',
        regionId: ''
      },
      regionalMan:[],
      dialogVisible:false,
      dialogTwo:false,
      FormTwoData:{},
      xiu : 1,
      row:{}
    }
  },
  methods: {
    // 查看详情弹窗
    async Vm(id) {
      this.dialogTwo = true
      const {data} = await lop(id)
      // 处理状态
      data.forEach(item => {
        if(item.vmStatus === 0){
          item.vmStatus = '未投放'
        } else if ( item.vmStatus === 1 ) {
          item.vmStatus = '运营中'
        } else if ( item.vmStatus === 3 ) {
          item.vmStatus = '已撤机'
        }
      })
      data.forEach(item => {
        item.lastSupplyTime = item.lastSupplyTime.split('T')
       item.lastSupplyTime= `${item.lastSupplyTime[0]} `+`${item.lastSupplyTime[1]}`
      })

      this.FormTwoData = data
    },
    // 换页
    goup(val){
      this.region.pageIndex = this.region.pageIndex+val
      this.getone()
    },
    // 删除
    async delpoit(id) {
      console.log(1);
        try {
           await delPoint(id)
           this.getone()
           this.$message.success('删除成功')
        } catch(error) {
          console.log(error);
        }
      this.getone()
    },
    // 关闭表单
    submit() {
       this.dialogVisible = false
    },
    async onSubmit() {
       const {data} = await point(this.formInline)
       this.regionList = data.currentPageRecords
       this.getone()
    },
    // 新增
    add(){
      this.xiu = 1
      this.dialogVisible = true
    },
    // 修改
    revise(row) {
      console.log(row);
      this.row = row
      this.xiu = 2
      this.dialogVisible = true
    },
    addPoint(){},
    // 查看详情弹窗
    handleCloseTwo(){
      this.dialogTwo = false
    },

    async getone(){
      const { data } = await point(this.region)
      const { data:reg } = await regionalManagement({pageIndex:1,pageSize:10000})
      this.regionList = data.currentPageRecords
      this.totalCount = data.totalCount
      this.regionalMan = reg.currentPageRecords
      // 对获取的数据添加序号属性
      this.regionList.forEach((item, index) => {
        this.$set(item, 'index', index + 1)
      })
    },
  }
}
</script>

<style lang="scss">
.el-cascader-panel{
  height: 100px !important;
}
.el-form--inline .el-form-item {
    margin-right: 10px;
    line-height: initial;
    margin-top: 10px;
}
</style>
